<template>
	<view>
		<view :class="['word_listitem word-box-hover',currentIndex==index?item.frequency+'-bg':'']" v-for="(item, index) in list" :key="index" @click="wordStudy(index)">
			<!-- #ifdef H5 -->
			<view :class="['num-box',item.frequency]" @mouseenter="wordShow(index)" @mouseleave="wordShow(index)" @click.stop="wordDetail(item)">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<!-- <view :class="['num-box',item.frequency]" @click.stop="wordShow(index)"> -->
			<!-- #endif -->
				<text v-if="item.isGK==1">{{item.gk_cs}}</text>
				<text v-else>{{item.zk_cs}}</text>
				<!-- <text >88888</text> -->
			</view>
			<view class="f-1 d-s-c">
				<view class="word">{{item.word}}</view>
				<view class="chinese fweib" v-show="(currentIndex==index&&clickTimes==2) || item.showCN">{{item.chinese}}</view>
			</view>
			<view :class="['audio-btn',{'audio-active' : item.showCN}]" @click.stop="showChinese(item)">中</view>
			<view class="word-modal" v-show="item.show">
				<view class="modal-box slot-content">
					<view class="d-a-c" :class="['text','f32',item.frequency+'-c']">
					{{frequencyText[item.frequency]}}
					<view class="yinbiao">{{item.phonetic}}</view>
					</view>
					<view class="d-s-c">
						<view class="f24 mr10">中考出现{{item.zk_cs}}次</view>
						<u-rate v-model="item.zk_zy" :disabled="true" size="28" active-color="#f2cb51" inactive-color="#f9e5a8"></u-rate>
					</view>
					<view class="d-s-c">
						<view class="f24 mr10">高考出现{{item.gk_cs}}次</view>
						<u-rate v-model="item.gk_zy" :disabled="true" size="28" active-color="#f2cb51" inactive-color="#f9e5a8"></u-rate>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view :style="{height: '120rpx'}"></view>
		<view class="presdete_bot d-b-c tc">
			<view class="d-c-c mr20 berboxz" @tap="prevPage">
				<u-icon name="arrow-left" color="#999999" size="28"></u-icon>
			</view>
			<view class="presdete_bo f32">
				<view class="middle-box">{{currentPage}}</view>/<view class="height-box">{{lastPage}}</view>
			</view>
			<view class="d-c-c ml20 berboxz" @click="nextPage">
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
			<!-- <view class="box1">
				<u-switch v-model="checked" size="40"></u-switch>老师带读
			</view> -->
			<view class="box2">
				<picker @change="pickerChange" :range="playbackRateList">
					<view>{{playbackRate}}X</view>
				</picker>
			</view>
			<view class="box2" @click="wordSort">{{wordSortText}}</view>
			<view class="box3" @click="goAgain">剪纸盒</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				studyId: 0,
				currentPage: 1, //现数
				lastPage: 1, //总数
				list: [],
				currentIndex: 99, //当前页面单词索引
				clickTimes: 0, //单词点击次数
				checked: false, //是否老师带读
				frequencyText: {'high':'高频词','middle':'中频词','low':'低频词','base':'基础词'},
				playbackRate: 1.0, // 播放速度
				playbackRateList: [0.5,1.0,1.5,2.0],
				wordSortText: '随机',
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.studyId) {
					this.studyId = option.studyId
				}
				this.getStudyWordsList(this.studyId, this.currentPage)
			}
		},
		onShow() {
			uni.$on('nextPage', (data) => {
				this.currentPage = data
				this.nextPage()
			})
			uni.$on('endStudy', (data) => {
				this.endStudy()
			})
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				this.modalShow()
				return true
			}
			return false
		},
		onNavigationBarButtonTap(e) {
			if (e.text == '结束识记') {
				this.modalShow()
			}
		},
		methods: {
			getStudyWordsList(studyId, pageNo) {
				this.$u.post(this.$u.api.studyWords, {
					studyId: studyId,
					pageNo: pageNo,
					voiceType: this.$store.state.voiceType,
				}).then((res) => {
					let data = res.data
					this.list = []
					this.currentPage = data.current_page
					this.lastPage = data.last_page
					for (let i=0;i<data.list.length;i++) {
						let temp = data.list[i]
						temp.show = false
						temp.showCN = false
						this.list.push(temp)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			// 单词显示隐藏更多
			wordShow(index) {
				this.list[index].show = !this.list[index].show
			},
			// 页面返回弹窗提示
			modalShow() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否结束识记',
					confirmColor: '#4BB0FF',
					success: function (res) {
						if (res.confirm) {
							that.endStudy()
						}
					}
				})
			},
			// 继续选词-作废
			reStudy() {
				uni.navigateTo({
					url: '/pages/currhome/gopresdete?studyId='+this.studyId
				})
			},
			// 结束识记
			endStudy() {
				this.$u.post(this.$u.api.endStudy, {
					studyId: this.studyId
				}).then((res) => {
					uni.navigateTo({
						url: '/pages/study/after?studyId=' + this.studyId
					})
				}).catch((res) => {
					console.log(res)
					uni.$u.toast(res.data.msg)
				})
			},
			// 学习
			wordStudy(index) {
				if (this.currentIndex == index) {
					if (this.clickTimes == 0) {
						this.clickTimes = 1
					} else if (this.clickTimes == 1) {
						this.clickTimes = 2
					} else if (this.clickTimes == 2) {
						this.clickTimes = 0
					} else {
						return false
					}
				} else {
					this.clickTimes = 1
				}
				this.currentIndex = index

				let item = this.list[index]
				// this.playAudio(item.audio_url)
				if (item.audio_url) {
					this.utils.playAudio(item.audio_url, this.playbackRate)
				}
			},
			// 发音
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio, this.playbackRate)
				}
			},
			showChinese(item){
				item.showCN = !item.showCN
			},
			// 上一页
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--
					this.getStudyWordsList(this.studyId, this.currentPage)
					this.currentIndex = 99
				}
			},
			// 下一页
			nextPage() {
				if (this.currentPage < this.lastPage) {
					this.currentPage++
					this.getStudyWordsList(this.studyId, this.currentPage)
					this.currentIndex = 99
				}
			},
			// 发音倍速
			pickerChange(e) {
				let index = e.detail.value
				this.playbackRate = this.playbackRateList[index]
			},
			// 单词排序
			wordSort() {
				if (this.wordSortText == '默认') {
					this.wordSortText = '随机'
					this.list.sort((a, b) => a.id - b.id)
				} else {
					this.wordSortText = '默认'
					this.list.sort(() => Math.random() - 0.5)
				}
			},
			// 剪纸盒
			goAgain() {
				uni.removeStorageSync('paperBoxData')
				uni.navigateTo({
					url: '/pages/study/paperbox?studyId='+this.studyId+'&currentPage='+this.currentPage+'&lastPage='+this.lastPage
				})
			},
			// 单词详情
			wordDetail(item) {
				item.show = false
				uni.navigateTo({
					url: '/pages/study/word/detail?wordId=' + item.word_id
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #EEFAFF;
		padding: 20rpx 30rpx;
	}
	
	.my-audio-player {
		background: transparent;
	}

	.button_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.word_over {
			padding: 20rpx 30rpx 0;
			text-align: right;
			font-weight: 500;
			font-size: 26rpx;
			color: #387BEF;
			margin: 20rpx 0;
		}
	}

	.word_listitem {
		width: 100%;
		height: 120rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.06);
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		&:hover{
			z-index: 10;
		}
		.num-box {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			line-height: 60rpx;
			text-align: center;
			font-size: 22rpx;
			color: #FFFFFF;
			margin-right: 20rpx;
		}
		.word {
			font-size: 40rpx;
			color: #333333;
			font-weight: bold;
			margin-right: 20rpx;
			line-height: 80rpx;
		}
		.chinese {
			font-size: 32rpx;
			color: #666666;
			margin-right: 20rpx;
			line-height: 80rpx;
		}
		.btn {
			margin-right: 10rpx;
			margin-left: auto;
			transition:all 0.1 linear;
			&:hover{
				transform: scale(1.2);
			}
		}
		image {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}
		.audio-btn {
			width: 40rpx;
			height: 40rpx;
			position: relative;
			color: #727c82;
			&.audio-active{
				color: #1F93FF;
			}
			.audio {
				width: 40rpx;
				height: 40rpx;
				padding: 0;
				opacity: 0;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9;
			}
		}
	}
	
	.high {
		background:linear-gradient(135deg,#ff5d8d,#fe7fa6);
	}
	.middle {
		background:linear-gradient(135deg,#76bdf9,#97e1f2);
	}
	.base {
		background:linear-gradient(135deg,#9033d7,#be76f4);
	}
	.low {
		background:linear-gradient(135deg,rgba(43,195,51,0.5),rgba(100,211,100,.5));
	}
	.high-c {
		color:#ff5d8d;
	}
	.middle-c {
		color:#76bdf9;
	}
	.base-c {
		color:#9033d7;
	}
	.low-c {
		color:#2bc333;
	}
	.high-bg {
		background: rgba(255, 204, 219,0.4);
	}
	.middle-bg {
		background: rgba(75,176,255,0.4);
	}
	.base-bg {
		background:rgba(234,170,255,0.4);
	}
	.low-bg {
		background: rgba(123,212, 43,0.4);
	}
	.select {
		border: 1rpx solid #387BEF !important;
		color: #387BEF !important;
		.word {
			font-size: 44rpx !important;
		}
		.chinese {
			font-size: 36rpx !important;
		}
	}
	.berboxz {
		border: 1rpx solid #999999;
		border-radius: 100%;
		width: 50rpx;
		height: 50rpx;
	}
	.cropp_icon {
		width: 100rpx;
		height: 100rpx;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.word_but {
		padding: 5vh 30rpx 20rpx;
	}
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.6);
		z-index: 9998;
	}
	.tis_box {
		width: 490rpx;
		height: 338rpx;
		position: relative;
	}
	.tis_box_back {
		image{
			width: 490rpx;
			height: 338rpx;
		}
	}
	.tis_box_cen {
		width: 490rpx;
		height: 338rpx;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
	}
	.tis_box_cen_img image {
		width: 97rpx;
		height: 92rpx;
		margin-top: -27rpx;
	}
	.tis_box_bot_yes {
		width: 180rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
	}
	.tis_box_bot_no {
		width: 180rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #999999, #C8C4C4);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
	}
	
	.presdete_bot {
		width: 100%;
		height: 120rpx;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		
		.presdete_bo {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color:#999999;
			.middle-box {
				color: #7BD42B;
				margin-right: 6rpx;
			}
			.height-box {
				margin-left: 6rpx;
				color: #FF165D;
			}
		}
		
		.box1 {
			display: flex;
			align-items: center;
			color: ;
			.u-switch {
				margin-right: 10rpx;
			}
		}
		
		.box2,.box3 {
			width: 122rpx;
			height: 80rpx;
			background: #FFA726;
			border-radius: 10rpx ;
			font-size: 24rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
		}
		
		.box3 {
			background: #7BD42B;
		}
	}
	
	.word-modal {
		position: absolute;
		left: 90rpx;
		top: 0;
		z-index: 100;
		border: 1rpx solid #e5e5e5;
		border-radius: 20rpx;
	}
	.modal-box{
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		line-height: 40rpx;
		// width: 450rpx;
		.text{
			font-weight: bold;
		}
		
		.fayin{
			display: flex;
			align-items: center;
			text{
				margin-right: 20rpx;
			}
			
			image{
				width: 54rpx;
				margin-right: 10rpx;
			}
		}
		
		.yinbiao{
			margin-left: auto;
			color: #000;
			font-weight: 100;
		}
	}
</style>
